<template>
  <view>

    <u-navbar :immersive="true" :is-back="false" back-icon-color="#333" title-color="#ffffff" :background="background"
              :border-bottom="false"></u-navbar>

    <view class="top_bgtu" :src="BestImgUrl + '/login_bg2.png'" mode="widthFix"></view>


    <view class="logo_bottom_box">
      <view class="logo" style="display: block;font-weight: bold">
        <!--				<image :src="BestImgUrl + '/Group 34874.png'"></image>-->
        <view style="font-size: 48rpx;color: #333333;line-height: 96rpx;">开店推广
          <text style="color: #FF7900;margin-left: 20rpx">找领食</text>
        </view>
        <view style="color: #767676;line-height: 40rpx;font-size: 28rpx;">营销数字化 更高效 更有效</view>
      </view>

      <view style="height: 30rpx"></view>
      <view style="width: 690rpx;border-radius: 30rpx;margin: 30rpx 30rpx;
      background: linear-gradient( 173deg, #FFFEF9 0%, #FFFFFF 99%);padding: 30rpx">
        <view style="width: 690rpx;">
          <view class="u-flex" style="width: 630rpx;justify-content: space-between;position: relative">
<!--            <image src="https://td.lszbg.com/public/uploads/h5/home/tab_bg.png" style="height: 200rpx;width: 630rpx;position: absolute" ></image>-->
            <view @click="shelectItem(1)"
                :class="[select===1?'select':'select_no']" style="text-align: center;width: 315rpx;display: flex;align-items: center;flex-direction: column">
              账号密码登录
              <view :class="[select===1?'select1':'select_no1']"
                  style="height: 10rpx;width: 38rpx;border-radius: 10rpx;margin-top: 16rpx">

              </view>
            </view>
            <view  @click="shelectItem(2)"
                   :class="[select===2?'select':'select_no']" style="text-align: center;width: 315rpx;display: flex;align-items: center;flex-direction: column">
              验证码登录
              <view :class="[select===2?'select1':'select_no1']"
                  style="height: 10rpx;width: 38rpx;border-radius: 10rpx;margin-top: 16rpx">
              </view>
            </view>
          </view>
        </view>
        <view style="height: 56rpx"></view>
        <view class="u-flex" style="width: 630rpx;height: 80rpx;background: #F8F8F8;border-radius: 12rpx 12rpx 12rpx 12rpx;padding: 0 20rpx">
          <image src="https://td.lszbg.com/public/uploads/h5/home/shopl (3).png"
                 style="width: 40rpx;height: 40rpx;margin-right: 10rpx"></image>
          <view style="flex: 1">
            <u-input v-model="mobile" type="text" :border="false" placeholder="请输入账号"/>
          </view>
        </view>
        <view style="height: 26rpx"></view>
        <view  v-if="select===1"
            class="u-flex" style="width: 630rpx;height: 80rpx;background: #F8F8F8;border-radius: 12rpx 12rpx 12rpx 12rpx;;padding: 0 20rpx">
          <image src="https://td.lszbg.com/public/uploads/h5/home/shopl (1).png"
                 style="width: 40rpx;height: 40rpx;margin-right: 10rpx"></image>
          <view style="flex: 1">
            <u-input v-model="mima" type="password" :border="false" placeholder="请输入密码"/>
          </view>
        </view>
        <view v-if="select===2"
            class="u-flex" style="width: 630rpx;height: 80rpx;background: #F8F8F8;border-radius: 12rpx 12rpx 12rpx 12rpx;;padding: 0 20rpx">
          <image src="https://td.lszbg.com/public/uploads/h5/home/shopl (2).png"
                 style="width: 40rpx;height: 40rpx;margin-right: 10rpx"></image>
          <view style="flex: 1">
            <u-input v-model="phoneCode" type="number" :border="false" placeholder="请输入验证码"/>
          </view>
          <view @click="getCode()" style="font-size: 28rpx;color: #FF7900;line-height: 40rpx;">{{tips}}</view>
        </view>
        <view style="width: 630rpx;height: 88rpx;background: linear-gradient( 270deg, #FF7900 0%, #FF7900 100%);
        border-radius: 200rpx 200rpx 200rpx 200rpx;font-size: 32rpx;color: #FFFFFF;margin-top: 30rpx;
        text-align: center;line-height: 88rpx" @click="login()">
          登录
        </view>
        <view class="protocol" style="margin-top: 30rpx">
          <view class="dianji">
            <image @tap="check_icon()" v-if="check_on == !1" class="check_icon"
                   src="/static/images/icon_check_on2.png"></image>
            <image @tap="check_icon()" v-else class="check_icon" src="/static/images/icon_check_on.png"></image>
          </view>
          <view>点击同意《<span @click.stop="yhxy">用户协议</span>》和《<span @click.stop="ysxy">隐私协议</span>》</view>
        </view>
      </view>
      <view
          style="width: 690rpx;height: 320rpx;background: #FFFFFF;border-radius: 24rpx 24rpx 24rpx 24rpx;margin: 0 30rpx;padding: 30rpx">
        <view class="u-flex" style="justify-content: space-between">
          <view  style="display: flex">
            <image src="https://td.lszbg.com/public/uploads/h5/home/rz (3).png"
                   style="width: 72rpx;height: 52rpx"></image>
            <view style="font-size: 30rpx;color: #555555;line-height: 42rpx;">提升曝光</view>
          </view>
          <view style="font-size: 28rpx;color: #999999;line-height: 40rpx;">
            商圈曝光提升<text style="color: #FF7900">20%以上</text>
            <image src="https://td.lszbg.com/public/uploads/h5/home/ts.png" style="width: 44rpx;height: 44rpx"></image>
          </view>
        </view>
        <view class="u-flex" style="margin-top: 20rpx;justify-content: space-between">
          <view style="display: flex">
            <image src="https://td.lszbg.com/public/uploads/h5/home/rz (4).png"
                   style="width: 72rpx;height: 52rpx"></image>
            <view style="font-size: 30rpx;color: #555555;line-height: 42rpx;">提升到店客流</view>
          </view>
          <view style="font-size: 28rpx;color: #999999;line-height: 40rpx;">
            同比客流增加<text style="color: #FF7900">1.0-1.2倍</text>
            <image src="https://td.lszbg.com/public/uploads/h5/home/ts.png" style="width: 44rpx;height: 44rpx"></image>
          </view>
        </view>
        <view class="u-flex" style="margin-top: 20rpx;justify-content: space-between;">
          <view  style="display: flex">
            <image src="https://td.lszbg.com/public/uploads/h5/home/rz (1).png"
                   style="width: 72rpx;height: 52rpx"></image>
            <view style="font-size: 30rpx;color: #555555;line-height: 42rpx;">提升利润</view>
          </view>
          <view style="font-size: 28rpx;color: #999999;line-height: 40rpx;">
            成本节省<text style="color: #FF7900">1W以上</text>
            <image src="https://td.lszbg.com/public/uploads/h5/home/ts.png" style="width: 44rpx;height: 44rpx"></image>
          </view>
        </view>
        <view style="margin-top: 20rpx;font-size: 24rpx;color: #888888;line-height: 34rpx;">*以上为参考性数值</view>
      </view>
      <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
      </u-verification-code>
      <!--      <view class="input-box">-->

      <!--        <view class="input_iten">-->
      <!--          <view class="ititle">账号</view>-->
      <!--          <view class="trueinfot">-->
      <!--            <u-input v-model="mobile" type="text" :border="false" placeholder="请输入手机号"/>-->
      <!--          </view>-->
      <!--        </view>-->

      <!--        <view class="input_iten">-->
      <!--          <view class="ititle">密码</view>-->
      <!--          <view class="trueinfot">-->
      <!--            <u-input v-model="mima" type="password" :border="false" placeholder="请输入密码"/>-->
      <!--          </view>-->
      <!--          <view class="wjmm">忘记密码?</view>-->
      <!--        </view>-->
      <!--      </view>-->
    </view>


    <!--    <view class="protocol_wrap">-->
    <!--      <view class="denglu" @click="login()">登录商家端</view>-->

    <!--    </view>-->

  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      background: {
        background: 'transparent'
      },
      check_on: !1,
      mobile: '',
      mima: '',
      phoneCode: '',

      wxopen: 0,
      select:1,
      seconds: 60,
      tips:'获取验证码',
    }
  },
  onLoad() {

  },
  methods: {
    getCode(){
      var that = this
      if (that.$refs.uCode.canGetCode) {
      uni.showLoading({
        title: '正在获取验证码'
      })
      setTimeout(() => {
        this.$u.post('/shop/login/getLoginCode', {
          tel: that.mobile,
        }).then(res => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          that.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          that.$refs.uCode.start();
        }).catch(err => {
          uni.hideLoading();
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        })
      }, 2000);
      } else {
        that.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      this.tips = '获取验证码';
    },
    start() {
      //this.$u.toast('倒计时开始');
    },
    codeChange(text) {
      this.tips = text;
    },
    shelectItem(index){
      this.select = index
    },
    login() {
      var that = this
      console.log('登录')
      if (that.mobile == '') {
        uni.showToast({
          title: '请输入账号',
          icon: 'none'
        })
        return
      }

      if (that.mima == '' && that.select == 1) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }

      if (that.phoneCode == '' && that.select == 2) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }

      if (that.check_on == !1) {
        uni.showToast({
          title: '请勾选同意协议',
          icon: 'none'
        })
      } else {
        if(this.select === 2){
          //执行登录操作
          this.$u.post('/shop/login/codeLogin', {
            tel: this.mobile,
            code: this.phoneCode
          }).then(res => {
            console.log('验证码账号', res)
            var Datas = res.result
            uni.setStorageSync('token', Datas.token);
            uni.reLaunch({
              url: '/pages/index/index'
            })
          }).catch(err => {
            uni.showToast({
              title: err.data.msg,
              icon: 'none'
            });
          })
          return;
        }
        //执行登录操作
        this.$u.post('/shop/login/passwordLogin', {
          tel: this.mobile,
          password: this.mima
        }).then(res => {
          console.log('登录账号', res)
          var Datas = res.result
          uni.setStorageSync('token', Datas.token);
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }).catch(err => {
          uni.showToast({
            title: err.data.msg,
            icon: 'none'
          });
        })
      }
    },

    wxlogin() {
      var that = this
      //微信APP登录方式
      // #ifdef APP-PLUS
      if (that.check_on == !1) {
        uni.showToast({
          title: '请勾选同意协议',
          icon: 'none'
        })
      } else {
        uni.getProvider({
          service: 'oauth',
          success: function (res) {
            if (~res.provider.indexOf('weixin')) {
              uni.login({
                provider: 'weixin',
                success: function (loginRes) {
                  console.log('获取code', loginRes);

                  //判断第一次安装app获取不到unionid,官方bug无解 第一次没就提示再次点击微信登录
                  if (!loginRes.authResult.unionid) {
                    console.log('不存在unionid')
                    uni.showToast({
                      title: '请再次点击微信登录',
                      icon: 'none'
                    })
                  } else {
                    // 获取用户信息
                    uni.getUserInfo({
                      provider: 'weixin',
                      success: function (infoRes) {
                        console.log('用户昵称为：' + JSON.stringify(
                            infoRes));

                        // 设置unionid openid 昵称 头像
                        var Data = {
                          UserUid: loginRes.authResult
                              .unionid,
                          Openid: loginRes.authResult
                              .openid,
                          NickName: infoRes.userInfo
                              .nickName,
                          AvatarUrl: infoRes.userInfo
                              .avatarUrl
                        }

                        that.$u.post(
                            'api/Register/WechatLogin', {
                              UserUid: Data.UserUid,
                              Openid: Data.Openid,
                              NickName: Data.NickName,
                              AvatarUrl: Data.AvatarUrl
                            }).then(res => {
                          console.log('微信登录', res)
                          var Datas = res.data
                          uni.setStorageSync(
                              'userinfo', Datas);
                          uni.setStorageSync(
                              'Shop_id', Datas
                                  .shop_id)
                          //uni.navigateBack({
                          //	delta: 2
                          //})
                          uni.switchTab({
                            url: '/pages/index/index'
                          })
                        }).catch(err => {

                        })

                      }
                    })
                  }
                }
              })
            }
          }
        });
      }
      // #endif
    },


    miniwxlogin() {
      var that = this;
      if (that.check_on == !1) {
        that.$u.toast('请勾选协议')
      } else {
        uni.getUserProfile({
          desc: '登录',
          success: (res) => {
            //console.log('小程序', res)

            var Userinfo = {
              avatarUrl: res.userInfo.avatarUrl,
              nickName: res.userInfo.nickName,
            }

            uni.login({
              provider: 'weixin',
              success: function (login_res) {
                //console.log('获取小程序code', login_res)
                that.$u.post('api/Register/MiniLogin', {
                  code: login_res.code
                }).then(resasd => {

                  //console.log('小程序登录', resasd)
                  that.$u.post('api/Register/WechatLogin', {
                    UserUid: resasd.data.unionid,
                    Openid: resasd.data.openid,
                    NickName: Userinfo.nickName,
                    AvatarUrl: Userinfo.avatarUrl
                  }).then(resggg => {

                    console.log('微信小程序登录', resggg)

                    var Datas = resggg.data
                    uni.setStorageSync('userinfo', Datas);
                    uni.setStorageSync('Shop_id', Datas.shop_id)
                    //uni.setStorageSync('currentUser', Datas.user);

                    setTimeout(() => {
                      uni.switchTab({
                        url: '/pages/index/index'
                      })
                    }, 2000)

                  }).catch(err => {

                  })

                }).catch(err => {

                })
              }
            });

          },
          fail: (res) => {
            console.log(res)
          }
        });
      }
    },
    check_icon() {
      if (this.check_on == !0) {
        this.check_on = !1
      } else {
        this.check_on = !0
      }
    },
    yhxy() {
      uni.navigateTo({
        url: '/pages/yhxy/yhxy'
      })
    },
    ysxy() {
      uni.navigateTo({
        url: '/pages/ysxy/ysxy'
      })
    },
    yanzhengma() {
      uni.navigateBack({
        delta: 1
      })
    },
    zhuceac() {
      uni.navigateTo({
        url: '../../register/register'
      })
    },
    // 分享至好友/群聊
    onShareAppMessage(res) {
      const userInfo = JSON.parse(uni.getStorageSync('userinfo') || '{}')
      console.log('用户信息', userInfo)
      return {
        title: '欢迎使用小程序',
        path: 'pages/index/index?shareId=' + userInfo.id,
        imageUrl: '/static/images/share.png'
      }

    },
    // 分享至朋友圈
    onShareTimeline() {},
  }
}
</script>

<style lang="scss">
page {
  background: linear-gradient(168deg, #FFF9D5 0%, #FFEAD6 54%, #FFFDEF 100%);
}
.select{
  font-size: 32rpx;
  color: #3D3D3D;
  line-height: 44rpx;
  font-weight: bold;
}
.select_no{
  font-size: 32rpx;
  color: #acacac;
  line-height: 44rpx;
  font-weight: bold;
}
.select1{
  background-color: #FF7900
}
.select_no1{
  background-color: #FFFFFF;
}
.top_bgtu {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
}

.logo_bottom_box {
  position: fixed;
  /* #ifdef APP-PLUS */
  top: 2%;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  top: 2%;
  /* #endif */
  /* #ifdef H5 */
  top: 0%;
  /* #endif */
  width: 100%;
  padding: 0 0;
}

.u-field {
  font-size: 15px;
  padding: 11px 0 !important;
  text-align: left;
  position: relative;
  color: #303133;
}

.wxlogin {
  text-align: center;
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  margin: 0 auto;

  .wxname {
    margin-top: 10rpx;
  }
}

.acclogin {
  text-align: center;
  margin: 30rpx 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 65rpx;

  view:nth-child(1) {
    flex: 1;
  }

  view:nth-child(2) {
    flex: 1;
  }
}

.logo {
  margin: 200rpx 0 0rpx 70rpx;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  image {
    width: 266rpx;
    height: 208rpx;
    position: relative;
    top: 6rpx;
  }

  .biaoti_box {
    flex: 1;
    text-align: left;
    padding-left: 30rpx;

    view:nth-child(1) {
      font-size: 60rpx;
      font-weight: bold;
    }

    span {
      font-size: 28rpx;
      color: #AAAAAA;
    }
  }
}

.input-box {
  padding: 70rpx;

  .input_iten {
    margin-bottom: 30rpx;

    .ititle {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 14rpx;
    }

    .trueinfot {
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 200rpx;
      padding: 8rpx 30rpx;
    }

    .wjmm {
      text-align: right;
      color: #AAAAAA;
      margin-top: 10rpx;
      font-size: 24rpx;
    }
  }
}

.denglu {
  width: 84%;
  margin: 30rpx auto 0;
  border-radius: 200rpx;
  background-color: #FF4E0D;
  color: #ffffff;
  font-size: 35rpx;
  font-weight: bold;
  padding: 24rpx 0;
  text-align: center;
}

.denglu2 {
  width: 70%;
  margin: 30rpx auto;
  border-radius: 200rpx;
  background-color: #FF4E0D;
  color: #ffffff;
  font-size: 35rpx;
  font-weight: bold;
  padding: 30rpx 0;
  text-align: center;
}

.xieyi {
  display: flex;
  align-items: center;
}

.protocol_wrap {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.protocol {
  width: 84%;
  margin: 20rpx auto 0;
  color: #999;
  padding: 0 0 10px 0;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  justify-content: center;
}

.protocol span {
  color: #FF4E0D;
}

.check_icon {
  width: 34rpx;
  height: 34rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;
}

.mycode {
  text-align: center;

  span {
    color: #18B566;
    margin-left: 5px;
  }
}
</style>
